<template>
    <div>
        <h1>reactive</h1>
        <p>ref()函数接收一个基本类型的参数同时返回一个基于该值的响应式对象，该对象内部有且仅有一个属性value，该对象中的值一旦被改变和访问就会被跟踪到，通过修改refData.value的值，可以触发模板重新渲染</p>
        <p>reactive()函数接收一个复杂数据类型的数据(数组或对象)作为参数,并返回一个响应式代理对象</p>
        <p>count: {{count}} <button @click="add">add</button></p>
        <p>double: {{double}}</p>
        <p>name: {{obj.name}}</p>
        <ul>
            <li v-for="(item,index) in arr" :key="index">{{item}}</li>
        </ul>
    </div>
</template>
<script lang='ts'>
interface State {
    count: number;
    add: () => void;
    double: number;
    arr: number[];
    obj: {name?: string};
}
import {computed,reactive,toRefs} from 'vue'
export default {
    setup () {
      const state: State = reactive({
         count: 0,
         add: () => state.count++,
         double: computed(() => state.count*2),
         arr: [9,8,7],
         obj: {}
      })
      state.arr[0] = 10
      state.obj.name = 'lxy'
      const data = toRefs(state)
      return {
          ...data
      }
    }
}
</script>